<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单</title>

    <script src="js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="indent">
        <div class="indent-h1">
           <h1>欢迎购买</h1>
        </div>
        <div class="showAddressMessage">
            <div class="showAddress">确定收获地址</div>
            <div class="showAddress_after"></div>
        </div>
        <div class="addressMessage">
<!--            <span class="radioInput"><input  type="radio" class="next-radio-input" ></span>-->
<!--            <span class="address">广东省 肇庆市 高要区 莲塘镇 广东理工学院东区 （李明 收）13664991630</span>-->
<!--            <div>-->
<!--                <button class="newAddress">使用新地址</button>-->
<!--            </div>-->
        </div>

        <div class="indentMessage">
            <div class="indentMessage-h1">确认订单信息</div>
            <div class="indentMessage-h1-after"></div>
            <div class="indentMessage-img">
<!--                <img src="img/dog1.jpg" style="width: 100px; height: 100px">-->
<!--                <span class="petIntroduce">纯种博美俊介幼犬茶杯狗飞耳比熊长不大的狗狗泰迪雪纳瑞宠物小狗撒旦大苏打了解到发货开啥会的暗室逢灯</span>-->
<!--                <span class="numberMessage">数量:<input class="number" height="100%" autocomplete="off" value="1" style="width: 25px;height: 25px"></span>-->
<!--                <span class="money">600</span>-->
            </div>
        </div>

        <div>
            <span class="submitIndent">提交订单</span>
        </div>
    </div>


    <!--  地址模态框  -->
    <div class="modal fade" id="registered" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabelToRegistered">请输入本人的收获地址</h4>
                </div>
                <div class="modal-body">


                    <form class="form-horizontal">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">收获地址:</label>
                            <div class="col-sm-10">
                                <input type="text" name="oldpassword" class="form-control" id="oldpassword"  placeholder="地址">
                            </div>
                        </div>

                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="newAddress" onclick="newAddressMessage()"  data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>


</body>

<script type="text/javascript">

    /*
    *
    *       设置了购物车的变量,导致直接购买的数量也变了，取消全局，采用局部
    *
    * */

    $(function (){


        indentTemplate();


    });
    // 订单模板  userMessage
    var address;
    var phone;
    var name;
    function indentTemplate(){

        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'userMessage',
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                     address = data.extend.userMessage.address ;
                     name = data.extend.userMessage.name ;
                    phone = data.extend.userMessage.phone ;
                    $(".addressMessage").append("<span class='radioInput'><input type='radio' class='next-radio-input'></span>");
                    var messageToAddress = $("<span class='address'></span>").append(address+"&nbsp;&nbsp;&nbsp;( "+name+"   收 )"+'&nbsp;&nbsp;&nbsp;' +phone);
                    $(".addressMessage").append(messageToAddress)
                        .append("<div>" +
                            "                <button class='newAddress'>使用新地址</button>" +
                            "            </div>");
                         indentMessage_img();
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });

    }

    // 确定订单信息的模态框
    var petName;
    var petId;
    var money;
    var ID;

    var classify;
    function indentMessage_img(){
        ID = window.localStorage.getItem("ID");
        classify = window.localStorage.getItem("classify");
        var shopNum = window.localStorage.getItem("shopNum");
        var url = window.localStorage.getItem("url");
        var petIntroduceMessage = window.localStorage.getItem("petIntroduceMessage");
        var petPrice = window.localStorage.getItem("petPrice");
         money = petPrice.substr(petPrice.indexOf("￥")+1);
         // alert(money);
        petId = window.localStorage.getItem("petId");
        petName = window.localStorage.getItem("petName");
        // alert(petId + " " + petPrice)
        // alert(url+petIntroduceMessage+petPrice+money+petId);

        var img = $("<img  style='width: 100px; height: 100px'>").attr("src",url);
        $(".indentMessage-img").append(img);
        var petIntroduce = $ ("<span class='petIntroduce'></span>").append(petIntroduceMessage);
        $(".indentMessage-img").append(petIntroduce);
        $(".indentMessage-img").append("<span class='numberMessage'>数量:<input type='text' class='number' height='100%' autoComplete='off'" +
            "                                                              value='1' style='width: 55px;height: 25p'x></span>");
        var moneySpan = $("<span class='money'></span>").append(money);
        $(".indentMessage-img").append(moneySpan);

        // shopNum = parseInt(shopNum);
        if ( shopNum.length != 0){
            petNums = shopNum;
            // alert(1);
            $(".number").val(shopNum);
            var moneyss = (shopNum*money).toFixed(2);
            $(".money").text(moneyss);
        }else {
            // alert(2);
            petNums = 1;
            $(".number").val(1);
            $(".money").text(money);
        }

        // alert(shopNum.length+" "+typeof shopNum);

    }


    // 给新地址添加一个点击函数
    $(".indent").delegate(".newAddress","click",function (){
            // alert("我是新地址");
        $("#registered").modal({
            backdrop:"static"
        });
    });

    // 判断新地址是否为空
    var newAddress = false; // 判断是否是新地址
    function newAddressMessage(){
        var form_control = $(".form-control").val();
        if (form_control != null || form_control != ''){
            address = form_control;
            newAddress = true;
            // return true;
        }
        // alert("我点击了");
        return true;
    }


    var petNums;
    // alert(petNums+"  "+typeof petNums);
    var moneys;
    var ret = /^[0-9]*$/;
    $(".indentMessage").delegate(".number","keyup",function (){
        // alert(petNums);

        petNums = $(".number").val();
       var petNumMessage =  petNums;

        // alert(ret.test(petNums));
       if (!ret.test(petNums)){
           $(".money").text(money).toFixed(2);
           return;
       }




        if (petNums >= 1000){
            alert("单次购买数量最大为1000");
            return;
        }


        if (petNums == null ){
            money = money.toFixed(2);
            $(".money").text(money).toFixed(2);
            // alert(money);
        }else {
            moneys = (money*petNumMessage).toFixed(2);
            // alert(moneys);
            $(".money").text(moneys);
        }

    });

    // 添加宠物订单的Ajax请求
    function insertIndentToPet(){

        moneys = parseInt($(".money").text());
        petId = parseInt(petId);
        petNums = parseInt($(".number").val());
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'insertIndentToPet',
            data: {sum_money:moneys,address:address,petId:petId,petNum:petNums,petName:petName},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    alert("购买成功");
                    window.localStorage.removeItem("petId");
                    window.localStorage.removeItem("url");
                    window.localStorage.removeItem("petIntroduceMessage");
                    window.localStorage.removeItem("petPrice");
                    window.localStorage.removeItem("money");
                    window.localStorage.removeItem("petName");
                    window.localStorage.removeItem("shopNum");
                    window.localStorage.removeItem("petId");
                    window.localStorage.removeItem("classify");
                    newAddress = "";
                    window.location.href ="user";
                }
                if (data.code == 100){
                    alert("库存不足");
                    return;
                }
            }
            // error: function (){
            //     window.location.href ="index.html";
            // }
        });

    }

    // 提交订单按钮
    var Message;
    var results;
    $(".submitIndent").click(function (){
        // alert("提交成功");
        var petNum = $(this).parent().parent().children(".indentMessage")
            .children(".indentMessage-img").children(".numberMessage").children(".number").val();
        alert(petNum)
        petNums = petNum;
        alert(ret.test(petNums));
        if (!ret.test(petNums)){
            $(".money").text(moneys);
            alert("请输入正确的购买数量");
            return;
        }

        if (petNums<1){
            alert("购买数量不能少于1");
            $(".money").text(moneys);
            return;
        }

        if (newAddress == false && address==null){
            alert("请输入收获地址，或者再个人信息中保存默认收获地址!");
            return;
        }


        if (address != null ||address == '' && newAddress){
            Message = "收货人: "+name+" 电话:"+phone+" 收获地址: "+address+" 购买数量: "+ $(".number").val() +" 购买物品: "+petName;
            results=confirm(Message);
        }else {
            Message = "收货人: "+name+" 电话:"+phone+" 收获地址: "+address+" 购买数量: "+ $(".number").val()+" 购买物品: "+petName;
            results=confirm(Message);
        }

        if (results){
                // alert("我确定了");
                // Ajax请求，添加订单
                newAddress = false;
                if (ID == '宠物' || classify == '宠物'){
                    insertIndentToPet();
                }
                if ( ID == '宠物生活用品' || classify == '宠物生活用品'){
                    insertIndentToPetLifeGoods();
                }
            }

    });



    // 添加宠物生活用品订单的Ajax请求
    function insertIndentToPetLifeGoods(){

        moneys = parseInt($(".money").text());
        petId = parseInt(petId);
        petNums = parseInt($(".number").val());
        var token = localStorage.getItem("Token");
        $.ajax({
            type:"GET",
            url:'insertIndentToPetLifeGoods',
            data: {sum_money:moneys,address:address,priceId:petId,priceNum: petNums,priceName:petName},
            dataType:'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            success:function(data) {
                if (data.code == 200){
                    alert("购买成功");

                    window.localStorage.removeItem('priceId');
                    window.localStorage.removeItem("url");
                    window.localStorage.removeItem("petIntroduceMessage");
                    window.localStorage.removeItem("petPrice");
                    window.localStorage.removeItem("money");
                    window.localStorage.removeItem("petName");
                    window.localStorage.removeItem("petId");
                    newAddress = "";
                    window.location.href ="user";
                }
                if (data.code == 100){
                    alert("库存不足");
                    return;
                }
            }
            // error: function (){
            //     window.location.href ="index.html";
            // }
        });

    }



</script>

<style type="text/css">
    * {
        box-sizing: border-box;
    }
    body {
        width:100%;
        height:100%;
        background-color: #f7f7f7;
    }
    .indent{
        width: 70%;
        height: 100%;
        /*background-color: #4a596f;*/
        margin: 0 auto;
    }
    body h1{
        width: 170px;
        height: 35px;
        font-size: 35px;
        color: orange;
    }
    .indent .showAddressMessage{
        margin-top: 70px;
    }
    .showAddressMessage .showAddress{
        font-size: 20px;
    }
    .showAddressMessage .showAddress_after{
        margin-top: 5px;
        width: 100%;
        height: 3px;
        background-color: #4cae4c;
    }

    .addressMessage{
        margin-left: 80px;
    }
    .addressMessage .next-radio-input{
        /*margin-top: 3px;*/
        width: 20px;
        height: 20px;
        padding: 2px;

    }
    .addressMessage .address{
        display: inline-block;
        margin-top: 30px;
        font-size: 20px;
    }
    .addressMessage .radioInput{
       display: inline-block;
        /*padding-top: 10px;*/
        margin-top: 30px;
        margin-right: 5px;
        float: left;
    }
    .addressMessage .newAddress{
        margin-top: 20px;
        font-size: 15px;
    }

    .indent .indentMessage{
        margin-top: 40px;
    }
    .indentMessage .indentMessage-h1{
        font-size: 20px;
    }
    .indentMessage .indentMessage-h1-after{
        margin-top: 5px;
        width: 100%;
        height: 3px;
        background-color: #4cae4c;
    }
    .indentMessage .indentMessage-img{
        margin-top: 20px;
    }
    .indentMessage .petIntroduce{
        float: right;
        display: block;
        /*color: black;*/
        font-size: 20px;
        width: 50%;
        height: 100%;
        overflow: hidden;
        margin-top: 20px;
        margin-right: 420px;
    }
    .indentMessage .numberMessage{
        float: right;

        margin-top: -80px;
        font-size: 20px;
        margin-right: 210px;
    }
    .numberMessage .number{
        margin-top: -3px;
        width: 50px;
        height: 30px;
        float: right;
        margin-left: 10px;
        font-size: 20px;
    }
    .indentMessage .money{
        float: right;
        font-size: 30px;
        color: orange;
        margin-top: -88px;
        margin-right: 40px;
    }
    .indent .submitIndent{
        display: block;
        float: right;
        font-size: 20px;
        padding: 10px;
        color: white;
        margin-top: 20px;
        margin-right: 20px;
        background-color: orange;
    }
</style>
</html>